<template>
  <div class="main-container" id="main-container">
    <div style="background: #fff; height: 100%" id="incoming">
      <pageTabelLayout>
        <template #pageHeader>
          <div class="my-header" style="padding-top: 16px; padding-left: 10px" v-if="headerShow">
            <div class="search-form">
              <a-form size="small" :model="pageData.searchData">
                <a-row :gutter="20">
                  <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                    <a-form-item label="检验日期" :label-col-flex="pageData.labelColFlex">
                      <a-range-picker  popup-container="html"  class="bacClass" @change="selectDate" clear />
                    </a-form-item>
                  </a-col>
                  <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                    <a-form-item label="检验单号" :label-col-flex="pageData.labelColFlex">
                      <a-input class="bacClass" />
                    </a-form-item>
                  </a-col>
                  <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                    <a-form-item label="批号" :label-col-flex="pageData.labelColFlex">
                      <a-input class="bacClass" v-model="pageData.searchData.batch" allow-clear />
                    </a-form-item>
                  </a-col>
                  <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                    <a-form-item label="物料编号" :label-col-flex="pageData.labelColFlex">
                      <a-input
                        class="bacClass"
                        v-model="pageData.searchData.materialCode"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
                <a-row :gutter="20">
                  <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                    <a-form-item label="物料名称" :label-col-flex="pageData.labelColFlex">
                      <a-input
                        class="bacClass"
                        v-model="pageData.searchData.materialName"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                    <a-form-item label="供货单位" :label-col-flex="pageData.labelColFlex">
                      <a-input
                        class="bacClass"
                        v-model="pageData.searchData.supplyUnit"
                        allow-clear
                      />
                    </a-form-item>
                  </a-col>
                  <a-col :xxl="6" :xl="12" :lg="12" :md="12" :xs="24">
                    <a-form-item label="检验结果" :label-col-flex="pageData.labelColFlex">
                      <a-select popup-container="html" 
                        class="bacClass"
                        v-model="pageData.searchData.checkoutResult"
                        allow-clear
                      >
                        <a-option value="合格">合格</a-option>
                        <a-option value="不合格">不合格</a-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
          </div>
          <div class="my-divisders">
            <a-divider orientation="center">
              <icon-double-up
                v-if="headerShow"
                @click="changHeadShow(false)"
                :strokeWidth="2"
                :size="18"
              />
              <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
            </a-divider>
          </div>
          <div class="my-tool-bar" style="padding: 10px">
            <Toolbar
              :items="['查询', '新增', '打印']"
              @select="selectHandler"
              @add="addHandler"
              @dyBoufei="dyBoufeiHandler"
            />
          </div>
        </template>
        <template #pageTabel>
          <AgGridVuesCopys
            :rowHeight="33"
            :headerHeight="33"
            :suppressCopyRowsToClipboard="true"
            rowSelection="multiple"
            @grid-ready="gridReady"
            style="height: 100%"
            class="ag-theme-alpine"
            :defaultColDef="defaultColDef"
            :rowData="table.dataList"
            :columnDefs="cfsValue"
            :localeText="localeTextData"
            :suppressRowClickSelection="true"
          />
        </template>
        <paginationCopys
          :total="total"
          show-total
          show-jumper
          show-page-size
          @change="changePage"
          @page-size-change="changeSize"
          style="justify-content: center"
          :page-size="pagination.pageSize"
          :current="pagination.page"
        />
        <a-drawer
          :drawer-style="{ zIndex: 9999 }"
          height="100%"
          unmountOnClose
          :visible="pageData.showAdd"
          :mask-closable="false"
          placement="bottom"
          :closable="false"
        >
          <template #title>
            <a-row style="width: 100%; justify-content: space-between; box-sizing: border-box">
              <a-col flex="200px"> {{ pageData.sideTitle }}</a-col>
            </a-row>
          </template>
          <a-form ref="formRef" layout="horizontal" auto-label-width :model="dataForm">
            <a-row :gutter="20" justify="space-between">
              <a-col :span="4">
                <a-form-item
                  label="检验单号"
                  field="checkoutOdd"
                  :rules="[{ required: true, message: '检验单号必填' }]"
                  :validate-trigger="['change', 'blur']"
                >
                  <a-input
                    class="aInput"
                    :disabled="pageData.sideTitle === '编辑来料检验管理'"
                    v-model="dataForm.checkoutOdd"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item
                  label="检验日期"
                  field="checkoutDate"
                  :rules="[{ required: true, message: '检验日期必填' }]"
                  :validate-trigger="['change', 'blur']"
                >
                  <a-date-picker  popup-container="html"  style="width: 220px" v-model="dataForm.checkoutDate" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item
                  label="检查员"
                  field="inspector"
                  :rules="[{ required: true, message: '检查员必填' }]"
                  :validate-trigger="['change', 'blur']"
                >
                  <a-select popup-container="html" 
                    style="width: 220px"
                    v-model="dataForm.inspector"
                    allow-clear
                    allow-search
                    @search="seatchHandler($event, 2)"
                    @focus="selectAwait(2)"
                  >
                    <a-option
                      v-for="item in pageData.employeeList"
                      :key="item.id"
                      :value="item.name"
                      >{{ item.name }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="开单日期">
                  <a-date-picker  popup-container="html"  style="width: 220px" v-model="dataForm.billingDate" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item
                  label="供货单位"
                  field="supplyUnit"
                  :rules="[{ required: true, message: '供货单位必填' }]"
                  :validate-trigger="['change', 'blur']"
                >
                  <a-select popup-container="html" 
                    style="width: 220px"
                    v-model="dataForm.supplyUnit"
                    allow-clear
                    allow-search
                    @search="seatchHandler($event, 3)"
                    @focus="selectAwait(3)"
                  >
                    <a-option
                      v-for="item in pageData.receiptDocList"
                      :key="item.id"
                      :value="item.unit"
                      >{{ item.unit }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="20" justify="space-between">
              <a-col :span="4">
                <a-form-item label="入库单号">
                  <!-- <a-input class="aInput" v-model="dataForm.storageOdd" /> storageOddList-->
                  <a-select popup-container="html" 
                    style="width: 220px"
                    v-model="dataForm.storageOdd"
                    allow-clear
                    allow-search
                    @search="seatchHandler($event, 5)"
                    @change="changeOddMess"
                    @focus="selectAwait(5)"
                  >
                    <a-option
                      v-for="item in pageData.storageOddList"
                      :key="item.id"
                      :value="item.order_no"
                      >{{ item.order_no }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item
                  label="物料编号"
                  field="materialCode"
                  :rules="[{ required: true, message: '物料编号必填' }]"
                  :validate-trigger="['change', 'blur']"
                >
                  <a-input class="aInput" v-model="dataForm.materialCode" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="物料名称">
                  <a-input class="aInput" v-model="dataForm.materialName" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="单位">
                  <a-input class="aInput" v-model="dataForm.unit" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="供货数量">
                  <a-input-number :min="0" class="aInput" v-model="dataForm.supplyNum" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="20" justify="space-between">
              <a-col :span="4">
                <a-form-item label="抽检数量">
                  <a-input-number :min="0" class="aInput" v-model="dataForm.spotNum" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="批号">
                  <a-input class="aInput" v-model="dataForm.batch" />
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="检验结果">
                  <a-select popup-container="html"  style="width: 220px" v-model="dataForm.checkoutResult" allow-clear>
                    <a-option value="合格">合格</a-option>
                    <a-option value="不合格">不合格</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="检验性质">
                  <a-select popup-container="html"  style="width: 220px" v-model="dataForm.checkoutNature" allow-clear>
                    <a-option value="新物料">新物料</a-option>
                    <a-option value="正常使用">正常使用</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item label="件数">
                  <a-input-number class="aInput" :min="0" v-model="dataForm.numbers" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="20" justify="space-between">
              <a-col :span="4">
                <a-form-item label="入库日期">
                  <a-date-picker  popup-container="html"  style="width: 220px" show-time v-model="dataForm.storageDate" />
                </a-form-item>
              </a-col>
              <a-col :span="19">
                <a-form-item label="备注" field="remark">
                  <a-input class="aInput" style="width: 220px" v-model="dataForm.remark" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <div style="text-align: right">
            <el-button
              type="success"
              :icon="iconText.CirclePlus"
              @click="addCheck"
              style="margin-bottom: 10px; background: #67c23a"
              >新增</el-button
            >
          </div>
          <a-table :columns="napeInfoClumns" :data="dataForm.list" stripe :pagination="false">
            <template #serial="{ rowIndex }">
              <a-input-number class="aInput" v-model="dataForm.list[rowIndex].serial" />
            </template>
            <template #checkoutNape="{ rowIndex }">
              <a-select popup-container="html" 
                style="width: 220px"
                v-model="dataForm.list[rowIndex].checkoutNape"
                allow-clear
                @change="changeGetProject"
                allow-search
                @search="seatchHandler($event, 1)"
                @focus="selectAwait(1)"
              >
                <a-option
                  v-for="item in pageData.dystuffList"
                  :value="item.checkoutProject"
                  :key="item.id"
                  >{{ item.checkoutProject }}</a-option
                >
              </a-select>
            </template>
            <template #checkoutDetails="{ rowIndex }">
              <a-input
                type="text"
                class="aInput"
                v-model="dataForm.list[rowIndex].checkoutDetails"
              />
            </template>
            <template #productIndex="{ rowIndex }">
              <a-select popup-container="html" 
                style="width: 220px"
                v-model="dataForm.list[rowIndex].productIndex"
                allow-clear
              >
                <a-option
                  v-for="item in pageData.dystuffIndexList"
                  :value="item['indexMax/indexMin/']"
                  :key="item.id"
                  >{{ item['indexMax/indexMin/'] }}</a-option
                >
              </a-select>
            </template>
            <template #follow="{ rowIndex }">
              <a-input type="text" class="aInput" v-model="dataForm.list[rowIndex].follow" />
            </template>
            <template #napeConclusion="{ rowIndex }">
              <a-input
                type="text"
                class="aInput"
                v-model="dataForm.list[rowIndex].napeConclusion"
              />
            </template>
            <template #remark="{ rowIndex }">
              <a-input type="text" class="aInput" v-model="dataForm.list[rowIndex].remark" />
            </template>
            <template #action="{ rowIndex }" v-if="dataForm.list.length > 1">
              <el-button type="danger" @click="dataForm.list.splice(rowIndex, 1)" link
                >删除</el-button
              >
            </template>
          </a-table>
          <template #footer>
            <a-button size="mini" @click="pageData.showAdd = false"> 关闭 </a-button>
            <a-button type="primary" size="mini" @click="saveHandler"> 保存 </a-button>
            <a-button
              type="primary"
              status="warning"
              size="mini"
              @click="dyBoufeiHandler()"
              v-if="dataForm.id"
            >
              打印
            </a-button>
          </template>
        </a-drawer>

        <a-drawer
          :drawer-style="{ zIndex: 9999 }"
          height="50%"
          unmountOnClose
          :visible="pageData.showPrint"
          :mask-closable="false"
          placement="bottom"
          @cancel="pageData.showPrint = false"
        >
          <template #title>
            <a-row style="width: 100%; box-sizing: border-box">
              <a-col flex="100px"> 打印预览 </a-col>
            </a-row>
          </template>
          <div id="printCont" class="printCont">
            <h3 class="Head3">染化料检验报告</h3>
            <div class="secondTitle">
              <div style="flex: 1; text-align: left">日期: 2022-11-16</div>
              <div style="flex: 1; text-align: right">页码: 1</div>
            </div>
            <div class="headTop">
              <table class="mytable">
                <tr>
                  <td>检验名称</td>
                  <td>{{ pageData.printData.materialName }}</td>
                  <td>送检量</td>
                  <td>{{ pageData.printData.spotNum }}</td>
                  <td>批号</td>
                  <td>{{ pageData.printData.batch }}</td>
                </tr>
                <tr>
                  <td>入仓日期</td>
                  <td>{{ pageData.printData.storageDate }}</td>
                  <td>检测日期</td>
                  <td>{{ pageData.printData.checkoutDate }}</td>
                  <td>供货单位</td>
                  <td>{{ pageData.printData.supplyUnit }}</td>
                </tr>
                <tr>
                  <td>检验项目</td>
                  <td :colspan="2">检验详情</td>
                  <td>收货标准</td>
                  <td>检验结果</td>
                  <td>检验结论</td>
                </tr>
                <tr>
                  <td>{{ pageData.printData.checkoutNape }}</td>
                  <td :colspan="2">{{ pageData.printData.checkoutDetails }}</td>
                  <td> </td>
                  <td>{{ pageData.printData.checkoutResult }}</td>
                  <td>{{ pageData.printData.napeConclusion }}</td>
                </tr>
                <tr></tr>
                <tr>
                  <td :colspan="6" style="text-align: left"
                    >备注：{{ pageData.printData.remark }}</td
                  >
                </tr>
                <tr>
                  <td :colspan="6" style="text-align: left"
                    >最终结论：{{ pageData.printData.follow }}</td
                  >
                </tr>
              </table>
              <div style="margin-top: 10px; text-align: right"
                >检验人：{{ pageData.printData.inspector }}</div
              >
            </div>
          </div>
          <template #footer>
            <div style="text-align: center"
              ><a-button @click="pageData.showPrint = false">关闭</a-button>
              <a-button @click="vPrintClick" style="margin-left: 20px" type="primary"
                >打印</a-button
              >
            </div>
          </template>
        </a-drawer>
      </pageTabelLayout>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, onMounted } from 'vue'
  import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
  } from '@/hooks/table'
  import { Incoming, NapeInfo } from '@/interface/incomingInterface'
  import { dysuff, incoming } from '@/api/laboratory/index'
  import { Dystuff } from '@/interface/basicDataInterface'
  import { FormInstance, Message } from '@arco-design/web-vue'
  import { orderFn } from '@/api/laboratory/other'
  
  import { localeText } from '@/api/aggridZw'
  import emitter from '@/hooks/useEventBus'
  import dayjs from 'dayjs'
  import printJS from 'print-js'
  import { CirclePlus } from '@element-plus/icons-vue'
  export default defineComponent({
    name: 'incoming-management',
    components: {  },
    setup() {
      let iconText: any = {
        CirclePlus,
      }
      onMounted(() => {
        // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
        doRefresh()
      })
      const incomingApi = incoming()
      const headerShow = ref<boolean>(true)
      let changHeadShow = (boolVal: boolean) => {
        headerShow.value = boolVal
        emitter.emit('window-change')
      }
      const selectHandler = () => {
        pagination.page = 1
        doRefresh()
      }
      const formRef = ref<FormInstance>()
      const selectDate = (date: any) => {
        // console.log(date);
        if (date) {
          pageData.searchData.storageDate = date.join(',')
          return
        }
        pageData.searchData.storageDate = ''
      }
      const saveHandler = () => {
        formRef.value?.validate().then(async (err) => {
          if (!err) {
            await incomingApi
              .operIncoming({ ...dataForm })
              .then((res: any) => {
                if (res.code === 200) {
                  if (dataForm.id) {
                    Message.success({
                      content: '修改成功',
                      duration: 5000,
                    })
                  } else {
                    Message.success({
                      content: '新增成功',
                      duration: 5000,
                    })
                  }
                  doRefresh()
                  formRef.value?.resetFields()
                  pageData.showAdd = false
                } else {
                  Message.error({
                    content: res.message,
                  })
                }
              })
              .catch((res) => {
                console.log(res)
              })
          } else {
            console.log(err)
          }
        })
      }
      //下拉数据
      const options = ref<any>()
      const loading = ref(false)
      const seatchHandler = async (value: any, index: number) => {
        if (value) {
          loading.value = true
          await selectAwait(index, value, (data: any) => {
            options.value = data
          })

          loading.value = false
        } else {
          options.value = []
        }
      }
      const selectAwait = async (
        selectIndex: number,
        value: any = '',
        cb = (data: any) => {
          return data
        }
      ) => {
        switch (selectIndex) {
          case 1:
            await dysuff()
              .getFileDysuffList({ checkoutProject: value })
              .then((res) => {
                // pageData.dystuffList = res.data;
                if (res.code === 200) {
                  pageData.dystuffList = res.data
                  cb(res.data)
                } else {
                  Message.error({
                    content: '查询失败！',
                    duration: 5000,
                  })
                }
              })
            break
          case 2:
            await orderFn()
              .getHrhrEmployeeList({ name: value })
              .then((res) => {
                // pageData.employeeList = res.data.items;
                if (res.code === 200) {
                  pageData.employeeList = res.data
                  cb(res.data)
                } else {
                  Message.error({
                    content: '查询失败！',
                    duration: 5000,
                  })
                }
              })
            break
          case 3:
            await orderFn()
              .getProiderFieleList({ unit: value })
              .then((res) => {
                // pageData.receiptDocList = res.data;
                if (res.code === 200) {
                  pageData.receiptDocList = res.data
                  cb(res.data)
                } else {
                  Message.error({
                    content: '查询失败！',
                    duration: 5000,
                  })
                }
              })
            break
          case 5:
            await orderFn()
              .getDwStockList({ order_no: value })
              .then((res) => {
                if (res.code === 200) {
                  pageData.storageOddList = res.data
                  cb(res.data)
                } else {
                  Message.error({
                    content: '查询失败！',
                    duration: 5000,
                  })
                }
              })
        }
      }

      const changeGetProject = async (checkoutProject: any) => {
        if (checkoutProject) {
          await orderFn()
            .getProductCodeList({ checkoutProject })
            .then((res) => {
              if (res.code === 200) {
                pageData.dystuffIndexList = res.data
              }
            })
        } else {
          pageData.dystuffIndexList = []
        }
      }

      const editHandler = async (id: any) => {
        await incomingApi.getByIdSelectIncomingList({ id }).then((res) => {
          let incomData = reactive<{
            list: NapeInfo[]
          }>({ list: [] })
          incomData = res.data.incomingCheckout
          incomData.list = res.data.list
          incomData.list[0].id = null
          let keys = Object.keys(incomData)
          keys.forEach((v) => {
            dataForm[v] = incomData[v]
          })
          pageData.showAdd = true
          pageData.sideTitle = '编辑来料检验管理'
        })
      }
      const table = useTable()
      const doRefresh = async () => {
        pageData.pageLoading = true
        await incomingApi
          .getPageQueryIncomList({
            page: pagination.page,
            size: pagination.pageSize,
            deleteState: 0,
            ...pageData.searchData,
          })
          .then(({ code, data }) => {
            if (code === 200) {
              table.handleSuccess(data.list)
              gridOption.value.setRowData(data.list)
              total.value = data.total
            }
          })
          .catch(console.log)
          .finally(() => {
            pageData.pageLoading = false
          })
      }

      const addCheck = () => {
        // dataForm.battledoreMessageTwoList.push({ ...battTwo });
        let lastSerial: any = dataForm.list[dataForm.list.length - 1].serial
        listItem.serial = lastSerial + 1
        dataForm.list.push({ ...listItem })
      }
      const listItem: any = {
        id: null,
        serial: 1,
        checkoutNape: '',
        checkoutDetails: '',
        productIndex: '',
        follow: '',
        napeConclusion: '',
        remark: '',
      }
      const dataForm = reactive<Incoming>({
        id: null,
        checkoutOdd: '',
        checkoutDate: '',
        inspector: '',
        billingDate: '',
        supplyUnit: '',
        storageOdd: '',
        materialCode: '',
        materialName: '',
        unit: '',
        supplyNum: 0,
        spotNum: 0,
        batch: '',
        checkoutResult: '',
        checkoutNature: '',
        numbers: 0,
        storageDate: '',
        remark: '',
        list: [{ ...listItem }],
      })
      const rowKey = useRowKey('id')
      const scrollbar = ref(true)
      const { selectedRowKeys } = useRowSelection()
      const tableColumns = useTableColumn([
        {
          title: '检验单号',
          key: 'checkoutOdd',
          dataIndex: 'checkoutOdd',
          slotName: 'checkoutOdd',
          width: 150,
          fixed: 'left',
        },
        {
          title: '开单日期',
          key: 'billingDate',
          dataIndex: 'billingDate',
          width: 150,
        },
        {
          title: '入库单',
          key: 'storageOdd',
          dataIndex: 'storageOdd',
          width: 150,
        },
        {
          title: '入库日期',
          key: 'storageDate',
          dataIndex: 'storageDate',
          width: 150,
        },
        {
          title: '供货单位',
          key: 'supplyUnit',
          dataIndex: 'supplyUnit',
          width: 150,
        },
        {
          title: '物料编号',
          key: 'materialCode',
          dataIndex: 'materialCode',
          width: 150,
        },
        {
          title: '物料名称',
          key: 'materialName',
          dataIndex: 'materialName',
          width: 150,
        },
        {
          title: '单位',
          key: 'unit',
          dataIndex: 'unit',
          width: 150,
        },
        {
          title: '批号',
          key: 'batch',
          dataIndex: 'batch',
          width: 150,
        },
        {
          title: '供货数量',
          key: 'supplyNum',
          dataIndex: 'supplyNum',
          width: 150,
        },
        {
          title: '抽检数量',
          key: 'spotNum',
          dataIndex: 'spotNum',
          width: 150,
        },
        {
          title: '件数',
          key: 'numbers',
          dataIndex: 'numbers',
          width: 150,
        },
        {
          title: '检验员',
          key: 'inspector',
          dataIndex: 'inspector',
          width: 150,
        },
        {
          title: '检验日期',
          key: 'checkoutDate',
          dataIndex: 'checkoutDate',
          width: 150,
        },
        {
          title: '检查结果',
          key: 'checkoutResult',
          dataIndex: 'checkoutResult',
          width: 150,
        },

        {
          title: '检查性质',
          key: 'checkoutNature',
          dataIndex: 'checkoutNature',
          width: 150,
        },
        {
          title: '备注',
          key: 'remark',
          dataIndex: 'remark',
          width: 150,
        },
        {
          title: '建立人',
          key: 'createName',
          dataIndex: 'createName',
          width: 150,
        },
        {
          title: '建立日期',
          key: 'updateTime',
          dataIndex: 'createTime',
          width: 150,
        },
        {
          title: '修改人',
          key: 'updateName',
          dataIndex: 'updateName',
          width: 150,
        },
        {
          title: '修改日期',
          key: 'updateTime',
          dataIndex: 'updateTime',
          width: 150,
        },
      ])
      const napeInfoClumns = useTableColumn([
        {
          title: '序号',
          key: 'serial',
          dataIndex: 'serial',
          slotName: 'serial',
          width: 150,
        },
        {
          title: '检验项目',
          key: 'checkoutNape',
          dataIndex: 'checkoutNape',
          slotName: 'checkoutNape',
          width: 150,
        },
        {
          title: '检验详情',
          key: 'checkoutDetails',
          dataIndex: 'checkoutDetails',
          slotName: 'checkoutDetails',
          width: 150,
        },
        {
          title: '产品指标',
          key: 'productIndex',
          dataIndex: 'productIndex',
          slotName: 'productIndex',
          width: 150,
        },
        {
          title: '结果',
          key: 'follow',
          dataIndex: 'follow',
          slotName: 'follow',
          width: 150,
        },
        {
          title: '项目结论',
          key: 'napeConclusion',
          dataIndex: 'napeConclusion',
          slotName: 'napeConclusion',
          width: 150,
        },
        {
          title: '备注',
          key: 'remark',
          dataIndex: 'remark',
          slotName: 'remark',
          width: 150,
        },
        {
          title: '操作',
          key: 'action',
          dataIndex: 'action',
          slotName: 'action',
          fixed: 'right',
          width: 150,
        },
      ])

      const pagination = usePagination(doRefresh)
      const addHandler = () => {
        for (var key in dataForm) {
          if (key === 'id') {
            dataForm[key] = null
          } else if (!Array.isArray(dataForm[key])) {
            dataForm[key] = ''
          } else {
            dataForm[key].forEach((v: any) => {
              for (var prop in v) {
                if (prop === 'id') {
                  v[prop] = null
                } else if (prop === 'serial') {
                  v[prop] = 1
                } else {
                  v[prop] = ''
                }
              }
            })
          }
        }

        initData()
        pageData.showAdd = true
        pageData.sideTitle = '新增来料检验管理'
      }

      const changeOddMess = (code: any) => {
        pageData.storageOddList.forEach((v: any) => {
          if (v.order_no === code) {
            dataForm.materialCode = v.material_code
            dataForm.materialName = v.material_name
            dataForm.unit = v.unit
            dataForm.batch = v.grade
            dataForm.supplyNum = v.total_num
            dataForm.storageDate = v.create_time
          }
        })
      }

      // 新增时数据初始化
      const initData = () => {
        let threeNum: number = Math.floor(Math.random() * 1000)
        let year = new Date().getFullYear()
        let mouth = (new Date().getMonth() + 1).toString().padStart(2, '0')
        let day = new Date().getDate().toString().padStart(2, '0')
        dataForm.checkoutOdd = 'L' + year + mouth + day + threeNum
        dataForm.billingDate = dayjs(Date.now()).format('YYYY-MM-DD')
        dataForm.checkoutDate = dayjs(Date.now()).format('YYYY-MM-DD')
      }
      const dyBoufeiHandler = async () => {
        // pageData.showPrint = true;
        let vals =
          gridOption.value.getSelectedRows().map((v: any) => {
            return v.checkoutOdd
          }) ?? []
        if (vals.length > 0 || dataForm.checkoutOdd) {
          let checkoutOdd = vals.length > 0 ? vals[0] : dataForm.checkoutOdd
          await incomingApi.getPrintFieldIncoming({ checkoutOdd }).then((res: any) => {
            // console.log(res);
            if (res.code === 200) {
              pageData.printData = res.data[0]
              pageData.showPrint = true
            } else {
              Message.info(res.message)
            }
          })
        } else {
          Message.info('请选择需要打印的数据')
        }
      }
      const pageData = reactive<{
        dystuffList: Dystuff[] //检验项目列表
        employeeList: any[] //员工列表
        receiptDocList: any[] //供货单位列表
        dystuffIndexList: any[] //指标列表
        storageOddList: any[] //入库单号列表
        printData: any
        searchData: {
          storageDate: string | undefined
          materialCode: string | undefined
          materialName: string | undefined
          supplyUnit: string | undefined
          checkoutResult: string | undefined
          batch: string | undefined
        }
        showAdd: boolean
        sideTitle: string
        pageLoading: boolean
        dropDownData: any
        theight: number
        tablediv: any
        rHeight: number | undefined
        showPrint: boolean
        labelColFlex: any
      }>({
        labelColFlex: '80px',
        showPrint: false,
        dystuffList: [],
        dystuffIndexList: [],
        storageOddList: [],
        searchData: {
          storageDate: '',
          materialCode: '',
          materialName: '',
          supplyUnit: '',
          checkoutResult: '',
          batch: '',
        },
        showAdd: false,
        sideTitle: '新增来料检验管理',
        dropDownData: '',
        pageLoading: false,
        theight: 0,
        tablediv: null,
        rHeight: 0,
        employeeList: [],
        receiptDocList: [],
        printData: {},
      })

      //表格方面
      const gridOption = ref()
      const gridReady = (params: any) => {
        gridOption.value = params.api
        //调整表格自适应大小
        //gridOption.value.sizeColumnsToFit();
      }
      const defaultColDef = {
        sortable: true,
        resizable: true,
        filter: true,
        width: 120,
      }

      let cfsValue: any[] = tableColumns.map((o) => {
        let obj = {
          headerName: o.title,
          field: o.key,
          pinned: o['fixed'],
        }
        if (o.slotName === 'checkoutOdd') {
          // obj['resizable'] = false
          // obj['filter'] = false
          // obj['sortable'] = false
          // obj["lockPosition"] = "right"
          // obj["width"] = 80
          obj['cellRenderer'] = {
            template: `<a-link @click="a" class="gesture">{{checkoutOdd}}</a-link>`,
            setup(props: any) {
              const { checkoutOdd } = props.params.data
              const a = () => {
                editHandler(props.params.data.id)
              }
              return {
                a,
                checkoutOdd,
              }
            },
          }
        }

        return obj
      })
      let a = [
        {
          showRowGroup: 'hide_def',
          headerName: '',
          checkboxSelection: true,
          headerCheckboxSelection: true,
          pinned: 'left',
          width: 50,
          resizable: false,
          filter: false,
          sortable: false,
          minWidth: 50,
          maxWidth: 50,
          lockPosition: 'left',
        },
      ]
      cfsValue = a.concat(cfsValue)
      const total = ref(10)
      const changePage = (val: any) => {
        pagination.page = val
        doRefresh()
      }
      const changeSize = (val: any) => {
        pagination.pageSize = val
        doRefresh()
      }

      const localeTextData: any = ref(localeText)

      //打印
      const vPrintClick = () => {
        printJS({
          printable: 'printCont',
          type: 'html',
          targetStyles: ['*'],
        })
      }

      return {
        saveHandler,
        selectHandler,
        pageData,
        addHandler,
        dyBoufeiHandler,
        table,
        tableColumns,
        pagination,
        rowKey,
        scrollbar,
        selectedRowKeys,
        dataForm,
        napeInfoClumns,
        formRef,
        selectDate,
        editHandler,
        seatchHandler,
        options,
        loading,
        selectAwait,
        headerShow,
        changePage,
        changeSize,
        localeTextData,
        defaultColDef,
        gridReady,
        cfsValue,
        total,
        changHeadShow,
        vPrintClick,
        iconText,
        addCheck,
        changeOddMess,
        changeGetProject,
      }
    },
  })
</script>

<style lang="less" scope>
  .main-container {
    height: 100%;
  }

  .arco-drawer-header .arco-drawer-title {
    width: 100%;
  }

  .aInput {
    background: #fff;
    width: 270px;
    border: 1px solid #c9cdd3;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }

  .printCont {
    text-align: center;

    .Head3 {
      font-size: 25px;
      font-weight: bold;
    }

    .secondTitle {
      display: flex;
      font-size: 16px;
      justify-content: center;
    }

    .headTop {
      margin-top: 20px;
    }

    .mytable {
      width: 100%;

      th,
      td {
        padding: 5px;
        border: 1px solid #e3e3e3;
      }

      th {
        background: rgb(247, 248, 250);
      }
    }
  }

  :deep(.arco-input-wrapper .arco-input[disabled]) {
    -webkit-text-fill-color: #000 !important;
  }
</style>
